<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>收藏产品</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    {Common::css('base.css,mobilebone.css,collect.css')}
    {Common::js('lib-flexible.js')}
    {php echo Common::js('jquery.min.js,swiper.min.js,layer2.0/layer.js');}
</head>

<body>

    <div class="page">

        <div class="header_top">
            <a class="back-link-icon"{$backurl} data-ajax="false"></a>
            <h1 class="page-title-bar">我的收藏</h1>
            <div class="header-manage-btn" id="headerManageBtn">管理</div>
            <div class="header-manage-btn hide" id="headerFinishBtn">完成</div>
        </div>
        <!-- 公用顶部 -->

        <div class="page-content" id="collect_content">
            <div class="collect-view-box">
                <ul class="collect-view-group" id="content_area"></ul>
                <div class="collect-empty-block hide" id="collect-empty-block">
                    <i class="icon"></i>
                    <div class="txt">抱歉，暂无收藏的产品！</div>
                </div>
            </div>
            <div class="no-info-bar hide">亲，拉到最底啦~</div>
            <!-- 收藏列表 -->
            <div class="collect-footer-placeholder-bar hide">
                <div class="collect-footer-fixed-bar">
                    <span class="check-all-label"><i class="icon"></i>全选</span>
                    <a href="javascript:;" class="del-btn" id="delBtn">删除</a>
                </div>
            </div>
            <!-- 底部操作栏 -->
        </div>

    </div>
    <script>
        var param={p:1,completed:false}
        function component(){
            var headerManageBtn = $('#headerManageBtn');
            var headerFinishBtn = $('#headerFinishBtn');
            var delBtn = $('#delBtn');
            var collectFooterPlaceholderBar = $('.collect-footer-placeholder-bar');
            var itemBlock = $('.item-block');
            var itemCk = $('.item-ck');
            var checkAllLabel = $('.check-all-label');
            var urlArray = [];

            itemBlock.each(function(){
                urlArray.push($(this).attr('href'));
            });

            //开始管理编辑
            headerManageBtn.on('click',function(){

                $(this).addClass('hide');
                headerFinishBtn.removeClass('hide');
                itemCk.removeClass('hide');
                itemBlock.removeClass('checked').attr('href','javascript:;');
                collectFooterPlaceholderBar.removeClass('hide');

            });

            //单个选中
            itemBlock.on('click',function(){
                if($(this).hasClass('checked')){
                    $(this).removeClass('checked')
                }
                else{
                    $(this).addClass('checked')
                }
            });

            //判断全选、反选
            checkAllLabel.on('click',function(){
                if($(this).hasClass('checked')){
                    $(this).removeClass('checked');
                    itemBlock.removeClass('checked');
                }
                else{
                    $(this).addClass('checked');
                    itemBlock.addClass('checked');
                }
            });

            //完成
            headerFinishBtn.on('click',function(){
                $(this).addClass('hide');
                itemBlock.removeClass('checked');
                itemCk.addClass('hide');
                headerManageBtn.removeClass('hide');
                collectFooterPlaceholderBar.addClass('hide');
                checkAllLabel.removeClass('checked');

                itemBlock.each(function(i){
                    $(this).attr('href',urlArray[i])
                })

            });
            //删除收藏
            delBtn.on('click',function(){
                var id=new Array();
                $('.item-block.checked').each(function(i,v){
                     id.push($(this).attr('data-id'));   
                });
                if(id.length<1){
                    layer.open({
                        type: 4,
                        content: '请选择删除选项！'
                    }); 
                    return ;
                }
                layer.open({
                    content: '确定删除所选收藏？'
                    ,btn: ['确定', '取消']
                    ,yes: function(index){
                        layer.close(index);
                        $.post('{$cmsurl}collect/delete',{id:id},function(rs){
                            layer.open({
                                content: '取消收藏成功！'
                                ,skin: 'msg'
                                ,time: 1.5
                                ,end:function(){
                                    param={p:1,completed:false}
                                    load();
                                }
                            });
                        },'json');
                    }
                });
            })

        }
        var is_loading=false;
        function load(){
                if(is_loading){
                   return false;
                }
                is_loading=true;
                var manyi ="{$GLOBALS['cfg_satisfy']}";
                $.post('{$cmsurl}collect/ajax_data',param,function(rs){
                    var i=0,item;
                    var html='';
                    param.completed=rs.completed;
                    if(rs['data'].length==0 && param.p==1){
                       $('#collect-empty-block').removeClass('hide');
                    }else{
                        $('#collect-empty-block').addClass('hide');
                    }
                    while(rs['data'][i]){
                       item=rs['data'][i];
                       html+='<li>\
                                <a href="'+item['url']+'" data-ajax="false" data-id='+item['id']+' class="item-block">\
                                    <div class="item-ck hide">\
                                        <span class="check-label"></span>\
                                    </div>\
                                    <div class="item-hd">\
                                        <span class="type"><span class="label">'+item['model']+'</span></span>\
                                        <img src="'+item['litpic']+'" alt="" class="">\
                                    </div>\
                                    <div class="item-bd">\
                                        <div class="tit-bar">'+item['title']+'</div>\
                                        <div class="data-bar">\
                                            <span class="label">'+item['commentnum']+'条点评</span>';
                        if(item['type_id']!=4&&item['type_id']!=101&&manyi==1){
                        html += '<span class="label">'+item['satisfyscore']+'满意</span>';
                        }
                        html += '</div>';
                             if(item['price']>0){
                                html+='<div class="pri-bar">{Currency_Tool::symbol()}<span class="num">'+item['price']+'</span>起</div>';
                             }
                             else
                             {
                                 if(item['type_id']!=4&&item['type_id']!=101){
                                     html+='<div class="pri-bar"><span class="num">电询</span></div>';
                                 }
                             }
                            html+='</div></a></li>';
                            i++;    
                    }
                    if(param.p>1){
                        $('#content_area').append(html); 
                    }else{
                        $('#content_area').html(html);
                    }
                    component();
                    is_loading=false;
                    $('.no-info-bar').removeClass('hide');
                },'json') 
            }
        $(function(){
            load();
            //下拉加载
            $('#collect_content').scroll( function() {
                if(is_loading || param.completed){
                   return false;
                }
                var totalheight = parseFloat($(this).height()) + parseFloat($(this).scrollTop());
                var scrollHeight = $(this)[0].scrollHeight;
                if(totalheight-scrollHeight>= -10){
                    ++param.p;
                    load();
                }
            });
        });
    </script>

</body>
</html>